<div class="col-sm-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>新增</h5>

        </div>
        <div class="ibox-content">
            <form method="post" id="form" action="save" class="form-horizontal" enctype="multipart/form-data">
                <!--类别好了-->

                <!--<div class="form-group">-->
                    <!--<label class="col-sm-3 control-label">属性名称：</label>-->
                    <!--<div class="col-sm-9">-->
                        <!--<input required type="text" name="title" class="form-control" placeholder="" />-->
                        <!--<span class="help-block m-b-none">建议不超过六个字</span>-->
                    <!--</div>-->
                <!--</div>-->
                <div class="form-group">
                    <label class="col-sm-3 control-label">选择父级分类：</label>
                    <div class="col-sm-9" >
                        <div class="col-sm-4">
                            <div>一级分类</div>
                            <select id="selF" style="height: 140px;" class="col-sm-12" multiple="">

                            </select>
                        </div>
                        <div class="col-sm-1">

                        </div>
                        <div class="col-sm-4">
                            <div>二级分类</div>
                            <select id="selB" style="height: 140px;" class="col-sm-12" multiple="">

                            </select>
                        </div>

                        <p id="pid"></p>
                    </div>

                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">子叶类目：(单选)</label>
                    <div class="col-sm-9 typeBox"></div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">属性/规格（最少填一个）：</label>
                    <div class="col-sm-9">
                        <div style="padding: 10px 0">
                            <span style="vertical-align: bottom">类型</span>
                            <select style="width: 100px;text-align: center" name="is_attr[]"><option value="">--选择--</option><option value="1">属性</option><option value="0">规格</option></select>
                        </div>
                        <input required type="text" name="title[]" class="form-control" placeholder="属性名" />
                        <input style="margin-top: 6px;" required type="text" name="specs[]" class="form-control" placeholder="可填多个，逗号分隔" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">属性/规格（最少填一个）：</label>
                    <div class="col-sm-9">
                        <div style="padding: 10px 0">
                            <span style="vertical-align: bottom">类型</span>
                            <select style="width: 100px;text-align: center" name="is_attr[]"><option value="">--选择--</option><option value="1">属性</option><option value="0">规格</option></select>
                        </div>
                        <input required type="text" name="title[]" class="form-control" placeholder="属性名" />
                        <input style="margin-top: 6px;" required type="text" name="specs[]" class="form-control" placeholder="可填多个，逗号分隔" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">属性/规格（最少填一个）：</label>
                    <div class="col-sm-9">
                        <div style="padding: 10px 0">
                            <span style="vertical-align: bottom">类型</span>
                            <select style="width: 100px;text-align: center" name="is_attr[]"><option value="">--选择--</option><option value="1">属性</option><option value="0">规格</option></select>
                        </div>
                        <input required type="text" name="title[]" class="form-control" placeholder="属性名" />
                        <input style="margin-top: 6px;" required type="text" name="specs[]" class="form-control" placeholder="可填多个，逗号分隔" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">属性/规格（最少填一个）：</label>
                    <div class="col-sm-9">
                        <div style="padding: 10px 0">
                            <span style="vertical-align: bottom">类型</span>
                            <select style="width: 100px;text-align: center" name="is_attr[]"><option value="">--选择--</option><option value="1">属性</option><option value="0">规格</option></select>
                        </div>
                        <input required type="text" name="title[]" class="form-control" placeholder="属性名" />
                        <input style="margin-top: 6px;" required type="text" name="specs[]" class="form-control" placeholder="可填多个，逗号分隔" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">属性/规格（最少填一个）：</label>
                    <div class="col-sm-9">
                        <div style="padding: 10px 0">
                            <span style="vertical-align: bottom">类型</span>
                            <select style="width: 100px;text-align: center" name="is_attr[]"><option value="">--选择--</option><option value="1">属性</option><option value="0">规格</option></select>
                        </div>
                        <input required type="text" name="title[]" class="form-control" placeholder="属性名" />
                        <input style="margin-top: 6px;" required type="text" name="specs[]" class="form-control" placeholder="可填多个，逗号分隔" />
                    </div>
                </div>



                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <div class="btn btn-primary btn-sm" onclick="Submit()" type="submit">保存内容</div>
                        <div class="btn btn-white btn-sm" onclick="javascript:window.history.go(-1)">取消</div>
                    </div>
                </div>
            </form>
            <div id="js-openModal1" style="position: absolute;z-index: -2;right: -200px;visibility: hidden" data-toggle="modal" data-target="#myModal6">打开回复的model</div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function () {

        var db = [];
        //多维数组做数据来源
        $.get('/type/getFoldList?len=2',function (res) {
            if(res.code==1){
                db = res.data;
                _init()
            }else{
                alert('获取类别数据失败');
            }
        })

        function Init(node) {
            return node.html("");
        }


        function _init() {
            //初始化select节点
            $.each(db, function (idx,val) {

                $("#selF").append("<option data-tindex='"+idx+"' value='"+val.id+"'>" + val.title + "</option>");
            })

            //一级变动
            $("#selF").change(function () {
                //清空二三级
                Init($("#selB"));
                Init($("#selC"));

                $.each(db,function (idx1,val1) {
                    if ($("#selF option:selected").text() == val1.title) {

                        $.each(val1.child, function (idx2, val2) {
                            $("#selB").append("<option data-tindex='"+idx2+"'  value='"+val2.id+"'>" + val2.title + "</option>");
                        });


                    }
                })


                $('#selB option:first-child').attr("selected",true);
                var findex = $("#selF option:selected").val()
                tindex= $("#selB option:selected").val()

                $.get("/type?parentid="+tindex+"&field=title,id",function (res) {
                    if(res.code==1){
                        var cArr = res.data.data
                        setTypeLast(cArr)
                    }else{
                        parent.layer.msg('获取子叶类目数据失败');
                    }
                })


            })

            $("#selB").change(function () {
                var findex = $("#selF option:selected").val()
                tindex= $("#selB option:selected").val()

                $.get("/type?parentid="+tindex+"&field=title,id",function (res) {
                    if(res.code==1){
                        var cArr = res.data.data
                        setTypeLast(cArr)
                    }else{
                        parent.layer.msg('获取子叶类目数据失败');
                    }
                })
            })
        }
        
        function setTypeLast(arr) {
            var inner = ''
            for(var x in arr){

                inner += "<label class=\"checkbox-inline\"><input type=\"radio\" name=\"typeid\" value=\""+arr[x].id+"\">"+arr[x].title+"</label>"
            }
            $('.typeBox').html(inner)

        }

    })


    function Submit()
    {

        var post = $('#form').serializeArray()

        var inputType = $("input[name='typeid']")
        console.log(inputType,inputType.val());
        if(!inputType.val()){
            parent.layer.msg('必选叶子类目');
            return;
        }

        $.post('save',post,function (res) {

            parent.layer.msg(res.msg);
        })


    }

    function linkType() {
        $('#js-openModal1').click();
    }

</script>

